<template>
  <a-modal :width="650" title="选择岗位" :visible="true" @cancel="cancel" @ok="handleOk">
    <a-layout-content>
      <a-row type="flex">
        <!-- left -->
        <a-col :span="12">
          <a-input-search placeholder="搜索岗位" style="width: 290px" @search="search" />
          <!-- 树形选择 -->
          <a-row class="tree-body">
            <custom-tree ref="tree" :data.sync="positionOptions" @addPosition="addPosition" @minus="minusArray" />
          </a-row>
        </a-col>
        <!-- right -->
        <a-col :span="10" class="mg_l20">
          <a-row class="sub_tit mg_b5">已经选择的岗位</a-row>
          <div class="selectedbox">
            <a-row v-for="(item, i) in List" :key="i" class="sub_tit mg_b5 staffrow"
              ><p><a-icon type="user" style="margin-right:6px;" />{{ item.name }}</p>
              <a-icon type="close" @click="minus(i)" />
            </a-row>
          </div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-modal>
</template>
<script>
import { getPositionInTree } from "@/api/department/position";

export default {
  name: "PositonTree",
  props: {
    List: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      visible: true,
      // List:[],
      positionOptions: []
    };
  },
  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },
  methods: {
    getData(data) {
      getPositionInTree({ companyId: this.companyId, ...data }).then(res => {
        this.positionOptions = this.tree(res.data[0].positionChildList, "positionChildList", true);
      });
    },
    addPosition(e) {
      const obj = this.List.filter(v => {
        return v.id === e.id;
      });

      if (obj.length > 0) {
        return;
      }

      this.List.push(e);

      this.$set(this.positionOptions, this.tree(this.positionOptions, "positionChildList", true));
    },
    minus(i) {
      this.List.splice(i, 1);
      this.$set(this.positionOptions, this.tree(this.positionOptions, "positionChildList", true));
    },
    minusArray(e) {
      this.List = this.getSubtract(this.List, [e]);
    },
    getSubtract(unionArr, subsetArr) {
      var new_tmp = [];
      for (var i = 0; i < unionArr.length; i++) {
        var flag = true;
        for (var j = 0; j < subsetArr.length; j++) {
          if (unionArr[i].id === subsetArr[j].id) {
            flag = false;
          }
        }
        if (flag) {
          new_tmp.push(unionArr[i]);
        }
      }
      return new_tmp;
    },
    search(e) {
      this.getData({ name: e });
    },
    showModal() {
      this.visible = true;
    },
    cancel() {
      // this.visible = false;

      this.$emit("cancelPositionList");
    },
    handleOk(e) {
      this.$emit("getPositionList", this.List);
      this.visible = false;
    },
    tree(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];

        const arr = this.List.filter(v => {
          return v.id === item.id;
        });

        item.isSelected = arr.length !== 0;

        if (item.children) {
          // item["disabled"] = onlyLastChild
          this.tree(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  padding: 0;
}
.tree-body {
  height: 400px;
  overflow-y: scroll;
  border-right: 1px solid #f1f1f1;
}
.tree-item {
  padding: 10px 0;
}
.staffrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  p {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .anticon-close {
    display: block;
    font-size: 12px;
  }
}
.selectedbox {
  height: 380px;
  overflow: auto;
}
</style>
